<template>
  <van-sticky>
    <van-nav-bar
      :safe-area-inset-top="true"
      :border="border"
      :title="title"
      @click-left="onClickLeft"
      @click-right="clearcAll"
    >
      <template #left>
        <van-icon name="arrow-left" size="23" v-show="arrow" />
      </template>
      <template #right>
        <van-icon name="setting-o" size="20" v-show="setting" />
      </template>
    </van-nav-bar>
  </van-sticky>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "MusicBack",
  props: {
    title: {
      type: String,
    },
    setting: {
      type: Boolean,
      default: false,
    },
    arrow: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["ListenRecentlyList"]),
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go("-1");
    },
    clearcAll() {
      //清理缓存
      Dialog.confirm({
        title: "恢复所有数据？",
        message: "\n会清空本地数据，推荐版本更新后再使用！\n\n(当前版本2.0)",
      })
        .then(() => {
          // 确认删除
          this.$store.commit("SET_STOPPLAY", false); //关闭音乐
          Toast.loading({
            message: "恢复数据中...",
            forbidClick: true,
          });
          this.$nextTick(function () {
            setTimeout(() => {
              window.localStorage.clear();
              Dialog.alert({
                title: "恢复成功!",
              }).then(() => {
                location.reload();
              });
            }, 2500);
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #f7f7f7;
}
.van-nav-bar .van-icon {
  color: #333;
}
</style>